<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">{{sysname}}</div>
          <div class="layout-nav">
            <Dropdown @on-click="dropDown">
              <Icon type="ios-contact"/>
              {{userName}}
              <DropdownMenu slot="list">
                <DropdownItem name="logout">安全退出</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu
            :active-name="activeName"
            theme="light"
            width="auto"
            @on-select="setMenu"
            :open-names="openNames"
            @on-open-change="openChange"
          >
            <Submenu v-for="(v, i) in menu" :name="i" :key="i">
              <template slot="title">{{v.name}}</template>
              <MenuItem v-for="(k, o) in v.child" :name="k.url" v-if="k.url" :key="o">{{k.name}}</MenuItem>
              <Submenu v-for="(k, j) in v.child" :name="i+'-'+'j'" v-if="k.child" :key="j">
                <template slot="title">{{k.name}}</template>
                <MenuItem v-for="(x, y) in k.child" :name="x.url" :key="y">{{x.name}}</MenuItem>
              </Submenu>
            </Submenu>
          </Menu>
        </Sider>
        <router-view/>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { routers, base } from '../router/config'
export default {
  data () {
    return {
      sysname: 'XXX后台管理系统',
      userName: sessionStorage.getItem('user'),
      menu: routers,
      activeName: '',
      openNames: [0]
    }
  },

  created () {
    let menu = sessionStorage.getItem('openNames')
    let openNames = menu ? JSON.parse(menu) : [0]
    let activeName = this.$route.path.replace(`${base}admin`, '')
    this.activeName = activeName
    this.openNames = openNames
  },

  methods: {
    setMenu (url) {
      this.$router.push(`${base}admin${url}`)
    },

    openChange (menu) {
      sessionStorage.setItem('openNames', JSON.stringify(menu))
      this.openNames = menu
    },

    dropDown (v) {
      if (v === 'logout') {
        sessionStorage.clear()
        this.$router.push(`${base}login`)
      }
    }
  }
}
</script>

<style scoped lang="less">
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  .layout-logo {
    float: left;
    left: 20px;
    color: #fff;
    font-size: 20px;
  }
  .layout-nav {
    float: right;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .ivu-menu-vertical.ivu-menu-light:after {
    width: 0;
  }
}
</style>
